<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="_csrf" th:content="${_csrf.token}" />
<meta name="_csrf_header" th:content="${_csrf.headerName}" />
<title th:text="${application.fullname} +' | 登录'"></title>
<!-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<!-- Bootstrap 3.3.7 -->
<link rel="stylesheet" th:href="@{/css/bootstrap.min.css}">
<!-- Font Awesome -->
<link rel="stylesheet" th:href="@{/css/font-awesome.min.css}">
<!-- Ionicons -->
<link rel="stylesheet" th:href="@{/css/ionicons.min.css}">
<!-- Theme style -->
<link rel="stylesheet" th:href="@{/css/AdminLTE.min.css}">
<!-- iCheck -->
<link rel="stylesheet" th:href="@{/css/blue.css}">

<link rel="stylesheet" th:href="@{/css/usm.css}">

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->

<script type="text/javascript">
	if (window != top) {
		top.location.href = location.href;
	}
</script>
<!-- Google Font -->
<link rel="stylesheet"
	href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
</head>
<body class="hold-transition login-page" onkeydown="keyOnClick(event);">
	<div class="login-box">
		<div class="login-logo">
			<a th:href="@{/}"><b th:text="${application.fullname}">Admin</b>[[${application.shortname}]]</a>
		</div>
		<div class="login-box-body">
			<p class="login-box-msg" th:text="#{LOGIN}">登录</p>
			<div th:if="${session.SPRING_SECURITY_LAST_EXCEPTION != null and session.SPRING_SECURITY_LAST_EXCEPTION.message != null}"
				class="callout callout-danger"
				th:text="${session.SPRING_SECURITY_LAST_EXCEPTION.message eq 'Bad credentials' ? '账号或密码错误，请重试  ' : session.SPRING_SECURITY_LAST_EXCEPTION.message}">
				账号或密码错误，请重试</div>
			<form id="login-form">
				<div class="form-group has-feedback">
					<input type="text" class="form-control" placeholder="用户名" th:placeholder="#{LOGIN.USERNAME}" name="username" id="s_username" required="required"
						value="" /> <span class="glyphicon glyphicon-user form-control-feedback"></span>
				</div>
				<div class="form-group has-feedback">
					<input th:attr="data-key=${session.USM_PASSWORD_PUB_KEY}" type="password" id="s_password" class="form-control"
						th:placeholder="#{LOGIN.PASSWORD}" name="password" required="required" value="" /> <span
						class="glyphicon glyphicon-lock form-control-feedback"></span>
				</div>

				<div class="form-group has-feedback" th:if="${session.USM_VERIFICATIONCODE_ENABLED}">
					<input type="text" class="form-control" placeholder="验证码" name="kaptcha" required="required" id="s_kaptcha"
						onkeyup="this.value=this.value.replace(/\W/g,'')" onafterpaste="this.value=this.value.replace(/\W/g,'')" /> <span
						class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
				</div>
				<div class="form-group has-feedback" th:if="${session.USM_VERIFICATIONCODE_ENABLED}">
					<img id="refreshCode" alt="如果看不清楚，请单击图片刷新！" class="pointer" th:src="@{/auth/kaptcha}" /> &nbsp;&nbsp;&nbsp;&nbsp;<a
						id="dynamic-code" href="javascript:;">点击刷新</a>
				</div>
				<div class="row">
					<div class="col-xs-8">
						<div class="checkbox icheck">
							<label> <input type="checkbox" name="remember-me" id="s_checkbox" /> 记住我
							</label>
						</div>
					</div>
					<!-- /.col -->
					<div class="col-xs-4">
						<button type="button" id="btn" class="btn btn-primary btn-block btn-flat">登录</button>
					</div>
					<!-- /.col -->
				</div>
				<a th:href="@{/login(l='zh_CN')}" class="btn btn-sm">简体中文</a> <a th:href="@{/login(l='en_US')}" class="btn btn-sm">English</a>
				<a th:href="@{/forget(l='en_US')}" class="btn-sm btn">忘记密码</a> <a th:href="@{/register}" class="btn-sm btn">注册账号</a>
			</form>
			
			

			<form id="login" style="display: none" th:action="@{/login}" method="post">
				<input style="display: none" type="hidden" name="username" id="username" required="required" value="" /> <input
					style="display: none" type="hidden" name="password" id="password" required="required" value="" /> <input
					style="display: none" type="hidden" name="kaptcha" id="kaptcha" required="required" value="" /> <input
					style="display: none" type="checkbox" name="remember-me" id="checkbox" />
			</form>
		</div>
		<!-- /.login-box-body -->
	</div>
	<!-- /.login-box -->

	<!-- jQuery 3 -->
	<script th:src="@{/js/jquery.min.js}"></script>
	<!-- Bootstrap 3.3.7 -->
	<script th:src="@{/js/bootstrap.min.js}"></script>
	<!-- iCheck -->
	<script th:src="@{/js/icheck.min.js}"></script>
	<script th:src="@{/js/jsencrypt.min.js}"></script>
	<script>
		$(function() {
			$('input').iCheck({
				checkboxClass : 'icheckbox_square-blue',
				radioClass : 'iradio_square-blue',
				increaseArea : '20%' /* optional */
			});
			$("#dynamic-code, #refreshCode").click(
					function() {
						$("#refreshCode").attr("src",
								'auth/kaptcha' + "?" + Math.random());
					});
			$('#btn').click(function() {
				// 取得要提交的参数  
				var username = $.trim($('#s_username').val());
				var password = $.trim($('#s_password').val());
				var encrypt = new JSEncrypt();
				encrypt.setPublicKey($.trim($('#s_password').data("key")));
				password = encrypt.encrypt(password);
				var kaptcha = $.trim($('#s_kaptcha').val());
				var checkbox = $.trim($('#s_checkbox').val());
				$('#username').val(username);
				$('#password').val(password);
				$('#kaptcha').val(kaptcha);
				if ($('.icheckbox_square-blue').hasClass("checked")) {
					$('#checkbox').attr("checked", "checked");
				} else {
					$('#checkbox').attr("checked", "");
				}
				// 提交表单  
				$("#login").submit();
			});
		});
		function keyOnClick(e) {
			var theEvent = window.event || e;
			var code = theEvent.keyCode || theEvent.which;
			if (code == 13) { //回车键的键值为13
				$('#btn').click(); //调用搜索事件
			}
		}
	</script>
</body>
</html>
